<template>
	<view class="page-main">

		<view class="header">

			<view class="capsule">
				<view class="left-button" @click="handleClick(() => {displayedTab = 0;})"
					:style="displayedTab === 0 ? activeButtonStyle : ``">
					跟进
				</view>
				<view class="right-button" @click="handleClick(() => {displayedTab = 1;})"
					:style="displayedTab === 1 ? activeButtonStyle : ``">
					操作记录
				</view>
			</view>

			<view class="title" v-show="displayedTab === 0">
				<view class="search">
					<view class="input">
						<image class="search-img" src="@/static/search23.png"></image>
						<input class="search-input" type="text" v-model="followkeyword" placeholder="客户电话/姓名" />
					</view>
					<view class="but" @tap="followsearch">查询</view>
				</view>

				<view class="tab">
					<view :class="{ avter: followtab == 2 }" @tap="chagnefollowtab(2)">全部</view>
					<view :class="{ avter: followtab == 0 }" @tap="chagnefollowtab(0)">跟进中</view>
					<view :class="{ avter: followtab == 1 }" @tap="chagnefollowtab(1)">已成交</view>
				</view>

			</view>

			<view class="title" v-show="displayedTab === 1">
				<view class="tab">
					<view :class="{ avter: recordtab == 0 }" style="margin: 0 20rpx" @tap="chagnerecordtab(0)">
						全部
					</view>
					<view :class="{ avter: recordtab == 1 }" style="margin: 0 20rpx" @tap="chagnerecordtab(1)">
						未审核
					</view>
					<view :class="{ avter: recordtab == 2 }" style="margin: 0 20rpx" @tap="chagnerecordtab(2)">
						审核中
					</view>
					<view :class="{ avter: recordtab == 3 }" style="margin: 0 20rpx" @tap="chagnerecordtab(3)">
						已通过
					</view>
					<view :class="{ avter: recordtab == 4 }" style="margin: 0 20rpx" @tap="chagnerecordtab(4)">
						已驳回
					</view>
				</view>
			</view>

		</view>

		<s-pull-scroll ref="pullScroll" :pullDown="pullDown"
			:class="{'empty-one': displayedTab == 0,'empty-two': displayedTab == 1,'pull-scroll': true}">
			<view class="scroll-f" :class="{'scroll-one': displayedTab == 0,'scroll-two': displayedTab == 1}">
				<scroll-view scroll-y @scrolltolower="pullUp" class="scroll-view">
					<view class="form-wrapper" v-show="displayedTab === 0">
						<view class="form-main" style="margin-bottom: 10px; min-height: 150px"
							v-for="(item, i) in followlist" :key="item.no">
							<customerCard :item="item" :type="1" :time="true" />
							<button class="blue-wide-button" @click="makePhoneCall(item.phone)">
								拨打电话继续跟进
							</button>
						</view>
						<uni-load-more v-show="showLoading" :class="{'loadMore': true,'loadEmpty': followlist.length === 0}" :status="status"
							:icon-size="12" :content-text="contentText" />
					</view>

					<view class="records-wrapper" v-show="displayedTab === 1" style="">
						<view class="operate-record" style="margin-bottom: 10px" v-for="(item, i) in recordlist"
							:key="item.id">
							<view class="row-wrapper">
								<view class="left-part" style="width: 100%">
									<view class="row-name">房源名称</view>
									<view class="input-wrapper">
										<scroll-view scroll-x="true" class="uni-input">{{item.name}}</scroll-view>
									</view>
								</view>
							</view>
							<view class="row-wrapper">
								<view class="left-part">
									<view class="row-name">房源租售类型</view>
									<view class="input-wrapper">
										<view class="uni-input">{{gettype(item.house_sell_type)}}</view>
									</view>
								</view>
								<view class="right-part">
									<view class="row-name">楼盘名称</view>
									<view class="input-wrapper">
										<scroll-view scroll-x="true" class="uni-input">{{item.title}}</scroll-view>
									</view>
								</view>
							</view>

							<view class="row-wrapper">
								<view class="left-part">
									<view class="row-name">楼层</view>
									<view class="input-wrapper">
										<view class="uni-input">{{ item.house_floor }}/{{ item.build_floor }}</view>
									</view>
								</view>
								<view class="right-part">
									<view class="row-name">房号</view>
									<view class="input-wrapper">
										<view class="uni-input">{{ item.house_number }}</view>
									</view>
								</view>
							</view>

							<view class="row-wrapper">
								<view class="left-part">
									<view class="row-name">面积</view>
									<view class="input-wrapper">
										<view class="uni-input">{{ item.house_area }}㎡</view>
									</view>
								</view>
								<view class="left-part">
									<view class="row-name">户型</view>
									<view class="input-wrapper">
										<view class="uni-input">{{ item.house_room }}室{{ item.house_hall }}厅
										</view>
									</view>
								</view>
							</view>
							<view class="row-wrapper" v-if="item.house_sell_type == 2 || item.house_sell_type == 3">
								<view class="right-part">
									<view class="row-name">
										<text>售价</text>
									</view>
									<view class="input-wrapper">
										<view class="uni-input">
											{{ numtoW(item.house_sell_price) }}
										</view>
									</view>
								</view>
								<view class="right-part">
									<view class="row-name">单价</view>
									<view class="input-wrapper">
										<view class="uni-input">{{ numtoW(item.house_sell_price_m) }}元/㎡</view>
									</view>
								</view>
							</view>
							<view class="row-wrapper" v-if="item.house_sell_type == 1 || item.house_sell_type == 3">
								<view class="right-part">
									<view class="row-name">
										<text>租价</text>
									</view>
									<view class="input-wrapper">
										<view class="uni-input">{{ numtoW(item.house_price) }}</view>
									</view>
								</view>
								<view class="right-part">
									<view class="row-name">单价</view>
									<view class="input-wrapper">
										<view class="uni-input">{{ numtoW(item.house_price_m) }}元/㎡</view>
									</view>
								</view>
							</view>
							<view class="row-wrapper">
								<view class="left-part">
									<view class="row-name">朝向</view>
									<view class="input-wrapper">
										<view class="uni-input">{{getdirection(item.house_direction)}}</view>
									</view>
								</view>
								<view class="right-part">
									<view class="row-name">楼盘类型</view>
									<view class="input-wrapper">
										<view class="uni-input">{{ item.build_type }}</view>
									</view>
								</view>
							</view>

							<button
								v-if="item.house_status == 1&&(item.house_sell_type==1||item.house_sell_type==2||item.house_sell_type==3)"
								@tap="user_house_check(item.id)" class="btn-review">
								提交审核
							</button>
							<button v-else-if="item.house_status == 2 || item.house_status == 4" class="btn-wait">
								{{item.house_status == 2 ? '请等待审核' : '请使用电脑登录，修改编辑后再提交'}}
							</button>

							<view class="house_status"
								:style="{background:item.house_status == 2 || item.house_status == 3? '': '#d9001b',}">
								{{ getstatus(item.house_status) }}
							</view>
						</view>

						<uni-load-more v-show="showLoading" :class="{'loadMore': true,'loadEmpty': recordlist.length === 0}"
							:status="status2" :icon-size="12" :content-text="contentText2" />
					</view>

				</scroll-view>
			</view>
		</s-pull-scroll>
	</view>
</template>

<script>
	import {
		appMixin
	} from '../../util/reuse';
	import customerCard from '@/components/customerCard.vue';
	import {
		TESTING
	} from '../../util/test';
	import {
		getHouseTag,
		uniShowToast
	} from '../../util/misc';
	import {
		authRouterGuard,
		isBlank
	} from '../../util/funcs';

	export default {
		mixins: [appMixin],

		components: {
			customerCard,
		},

		data() {
			return {
				recordtab: 0,
				followtab: 2,
				followkeyword: '',
				privateLoaded: false, // 跟进查询是否加载完成
				showLoading: true, // 是否显示加载图标
				status: 'loading', // 与下面一一对应
				contentText: {
					contentdown: '上拉加载更多', // more
					contentrefresh: '加载中', // loading
					contentnomore: '没有更多', // nomore
				},
				status2: 'loading', // 与下面一一对应
				contentText2: {
					contentdown: '上拉加载更多', // more
					contentrefresh: '加载中', // loading
					contentnomore: '没有更多', // nomore
				},
				pagi: {
					page: 1,
					pageSize: 5,
				},
				pagi2: {
					page: 1,
					pageSize: 5,
				},
				followlist: [],
				recordlist: [],
				aRecord: {
					id: '9878697978787909', //客户编号
					customerIntention: '',
					customerRequirement: '离地铁口近的写字楼，且不会超过11000元一月',
					days: '', // 跟进天数
					customerPhone: '15678888888',
					operateRecord: {},
				},
				index: 0,
				housingStatus: 0, // 房源状态
				array: [{
						name: '中国',
					},
					{
						name: '美国',
					},
					{
						name: '巴西',
					},
					{
						name: '日本',
					},
				],
				houseingStatusArray: [{
						name: '在租',
					},
					{
						name: '空闲',
					},
				],

				displayedTab: TESTING ? 1 : 0, // 跟进
				activeButtonStyle: {
					backgroundColor: '#ba9d61',
					color: 'white',
					boxShadow: '0rpx 4rpx 12rpx 0rpx rgba(186, 157, 97, 0.27)',
				},
			};
		},

		onShow: async function() {
			authRouterGuard(this).then(() => {
				this.addfollow();
				this.addrecord();
			})
		},

		watch: {},

		methods: {
			// 下拉刷新
			pullDown() {
				this.showLoading = false;
				if (this.displayedTab === 0) {
					this.followsearch();
				} else {
					this.recordsearch();
				}
			},

			// 上拉加载
			pullUp() {
				if (this.displayedTab === 0) {
					this.addfollow();
				} else if (this.displayedTab === 1) {
					this.addrecord();
				}
			},

			followsearch() {
				if (!this.privateLoaded) return
				this.privateLoaded = false;
				this.pagi.page = 1;
				this.status = 'loading';
				this.followlist = [];
				this.addfollow();
			},

			recordsearch() {
				this.pagi2.page = 1;
				this.status2 = 'loading';
				this.recordlist = [];
				this.addrecord();
			},

			chagnefollowtab(val) {
				this.followtab = val;
				this.followsearch();
			},

			chagnerecordtab(val) {
				this.recordtab = val;
				this.recordsearch();
			},

			makePhoneCall(val) {
				uni.makePhoneCall({
					phoneNumber: val, //仅为示例
				});
			},

			numtoW(num) {
				if (num > 10000) {
					return (num / 10000).toFixed(2) + '万';
				} else {
					return num;
				}
			},

			// 租售类型
			gettype(val) {
				return getHouseTag(val);
			},

			getIntentType(val) {
				if (val === 1) {
					return '写字楼';
				} else if (val === 2) {
					return '公寓';
				} else if (val === 3) {
					return '商业店铺';
				} else if (val === 4) {
					return '商品房';
				} else if (val === 5) {
					return '酒店';
				} else {
					return val;
				}
			},

			getdirection(val) {
				if (val === 1) {
					return '东';
				} else if (val === 2) {
					return '南';
				} else if (val === 3) {
					return '西';
				} else if (val === 4) {
					return '北';
				} else if (val === 5) {
					return '东南';
				} else if (val === 6) {
					return '东北';
				} else if (val === 7) {
					return '西南';
				} else if (val === 8) {
					return '西北';
				} else {
					return val;
				}
			},

			getstatus(val) {
				if (val === 1) {
					return '未审核';
				} else if (val === 2) {
					return '审核中';
				} else if (val === 3) {
					return '已通过';
				} else {
					return '已驳回';
				}
			},

			// 跟进查询
			addfollow() {
				if (this.status == 'noMore') {
					return;
				}
				this.status = 'loading';
				let postData = {
					page: this.pagi.page,
					pageSize: this.pagi.pageSize,
					follow_status: this.followtab == 2 ? null : this.followtab,
					keyword: this.followkeyword ? this.followkeyword : null,
				}
				this.$tokenRequest('/private_search', postData).then((data) => {
					if (data.code == 200) {
						setTimeout(() => {
              this.showLoading = true;
              this.privateLoaded = true;
							this.$refs.pullScroll.success();
						}, 500);
						this.followlist = [...this.followlist, ...data.data.list];
						this.pagi.page++;
						if (this.followlist.length < data.data.count) {
							this.status = 'more';
						} else {
							this.status = 'noMore';
						}
					} else {
						this.status = 'noMore';
						uniShowToast(data.msg);
						setTimeout(() => {
              this.showLoading = true;
              this.privateLoaded = true;
							this.$refs.pullScroll.error();
						}, 500);
					}
				}).catch((error) => {
          this.$refs.pullScroll.success();
          this.status = 'noMore';
          this.showLoading = true;
					this.privateLoaded = true;
        })
				/*
				uni.request({
					url: `${this.$http}/api/merchant/private_search`,
					method: 'POST',
					header: {
						Authorization: 'Bearer ' + this.$store.state.token,
					},
					data: {
						page: this.pagi.page,
						pageSize: this.pagi.pageSize,
						follow_status: this.followtab == 2 ? null : this.followtab,
						keyword: this.followkeyword ? this.followkeyword : null,
					},
					success: (res) => {
						// console.log('私客列表: ',res.data)
						if (res.data.code == 200) {
							setTimeout(() => {
								this.$refs.pullScroll.success();
							}, 500);
							this.followlist = [...this.followlist, ...res.data.data.list];
							this.pagi.page++;
							if (this.followlist.length < res.data.data.count) {
								this.status = 'more';
							} else {
								this.status = 'nomore';
							}
						} else {
							this.status = 'nomore';
							uni.showToast({
								title: res.data.msg,
								position: 'top',
								icon: 'none',
								duration: 2000,
							});
							setTimeout(() => {
								this.$refs.pullScroll.error();
							}, 500);
						}
					},
				});*/
			},

			// 操作记录
			addrecord() {
				if (this.status2 != 'noMore') {
					this.status2 = 'loading';
					let postData = {
						page: this.pagi2.page,
						pageSize: this.pagi2.pageSize,
						type: this.recordtab,
					}
					this.$tokenRequest('/record', postData).then((data) => {
						if (data.code == 200) {
							setTimeout(() => {
                this.showLoading = true;
								this.$refs.pullScroll.success();
							}, 500);
							this.recordlist = [...this.recordlist, ...data.data.house];
							this.pagi2.page += 1;
							if (this.recordlist.length < data.data.count) {
								this.status2 = 'more';
							} else {
								this.status2 = 'noMore';
							}
						} else {
							setTimeout(() => {
                uniShowToast(data.msg);
								this.$refs.pullScroll.error();
							}, 500);
							this.status2 = 'noMore';
						}
					}).catch((error) => {
            this.status2 = 'noMore';
            this.showLoading = true;
            this.$refs.pullScroll.success();
          })
					/*
					uni.request({
						url: `${this.$http}/api/merchant/record`,
						method: 'POST',
						header: {
							Authorization: 'Bearer ' + this.$store.state.token,
						},
						data: {
							page: this.pagi2.page,
							pageSize: this.pagi2.pageSize,
							type: this.recordtab,
						},
						success: (res) => {
							// console.log('resrecord',res)
							if (res.data.code == 200) {
								setTimeout(() => {
									this.$refs.pullScroll.success();
								}, 500);
								this.recordlist = [...this.recordlist, ...res.data.data.house];
								this.pagi2.page += 1;
								console.log('record', this.recordlist.length);
								if (this.recordlist.length < res.data.data.count) {
									this.status2 = 'more';
								} else {
									this.status2 = 'noMore';
								}
							} else {
								uni.showToast({
									title: res.data.msg,
									position: 'top',
									icon: 'none',
									duration: 2000,
								});
								setTimeout(() => {
									this.$refs.pullScroll.error();
								}, 500);
								this.status2 = 'noMore';
							}
						},
					});*/
				}
			},

			// 提交审核
			user_house_check(id) {
				this.$tokenRequest('/user_house_check', {
					house_id: id
				}).then((data) => {
					if (data.code === 200) {
						setTimeout(() => {
							this.$refs.pullScroll.pullDown();
						}, 500);
					}
					uniShowToast(data.msg);
				})

				/*
				uni.request({
					url: `${this.$http}/api/merchant/user_house_check`,
					method: 'POST',
					header: {
						Authorization: 'Bearer ' + this.$store.state.token,
					},
					data: {
						house_id: id,
					},
					success: (res) => {
						uni.showToast({
							title: res.data.msg,
							position: 'top',
							icon: 'none',
							duration: 2000,
						});
						if (res.data.code === 200) {
							setTimeout(() => {
								this.$refs.pullScroll.pullDown();
							}, 500);
						}
					},
				});*/
			},

			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value);
				this.index = e.detail.value;
			},
		},

	};
</script>

<style lang="scss" scoped>
	@import '../../assets/styles/global';

	$borderRadiusDegree: 34rpx;

	.page-main {
		background-color: #f7f8fa;
		height: 100%;

		.header {
			width: 100%;
			position: fixed;
			top: 0px;
			padding: 80rpx 30rpx 0;
			// padding: calc(var(--status-bar-height) + 30rpx) 30rpx 0;
			z-index: 1000;
			background-color: #f7f8fa;
		}

		.capsule {
			width: 100%;
			@include center;

			.left-button {
				position: relative;
				right: 7px;
				z-index: 0;
				width: 224rpx;
				height: 34px;
				background-color: #ffffff;
				border-top-left-radius: $borderRadiusDegree;
				border-bottom-left-radius: $borderRadiusDegree;
				@include center;
				font-size: 28rpx;
				box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(186, 157, 97, 0.13);
			}

			.right-button {
				position: relative;
				right: 7px;
				z-index: 0;
				width: 224rpx;
				height: 34px;
				background-color: #ffffff;
				box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(186, 157, 97, 0.13);
				border-top-right-radius: $borderRadiusDegree;
				border-bottom-right-radius: $borderRadiusDegree;
				@include center;
				font-size: 28rpx;
				color: #323233;
			}
		}

		.title {
			width: 100%;
			margin-bottom: 20rpx;
		}

		.empty-one {
			width: 100%;
			padding-top: 181px;
		}

		.empty-two {
			width: 100%;
			padding-top: 124px;
		}

		.scroll-one {
			width: 100%;
			height: calc(100vh - 181px - var(--window-bottom));
		}

		.scroll-two {
			width: 100%;
			height: calc(100vh - 124px - var(--window-bottom));
		}

		.scroll-view {
			width: 100%;
			height: 100%;
		}
	}

	.house_status {
		position: absolute;
		top: 16rpx;
		right: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		background-color: #71b603;
		color: #ffffff;
		width: 140rpx;
		text-align: center;
		border-radius: 10rpx;
	}



	.tab {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		view {
			height: 40px;
			line-height: 40px;
			margin: 0 40rpx;
		}

		.avter {
			color: #004fbf;
			border-bottom: 6rpx solid #004fbf;
		}
	}

	// .search {
	// 	padding: 10px 0;

	// 	.input {
	// 		width: 74%;
	// 		padding: 10rpx 20rpx;
	// 		border: 2rpx solid #797979;
	// 		border-radius: 20rpx;
	// 		display: flex;

	// 		image {
	// 			position: relative;
	// 			left: 1px;
	// 			width: 50rpx;
	// 			height: 50rpx;
	// 			margin-right: 10rpx;
	// 		}
	// 	}

	// 	.but {
	// 		background-color: #004fbf;
	// 		padding: 0rpx 50rpx;
	// 		border-radius: 20rpx;
	// 		color: #ffffff;
	// 		height: 37px;
	// 		line-height: 37px;
	// 	}
	// }
	
	.search {
		@include center;
		justify-content: space-between;
	  padding: 10px 0;
	  .input{
			@include center;
			justify-content: space-between;
	    width: 76%;
			height: 37px;
	    padding: 5px 10px;
	    border: 1px solid #797979;
	    border-radius: 20rpx;			
			.search-img{
			  width: 18px;
			  height: 18px;
			}		
			.search-input{
				 width: 91%;
			}
	    
	  }
	  .but{
	      background-color: #004fbf;
	      padding: 0rpx 50rpx;
	      border-radius: 20rpx;
	      color: #FFFFFF;
	      height:37px;
	      line-height: 37px;
	    }
	}

	.form-main {
		width: 100%;
		min-height: 416px;
		background-color: #ffffff;
		border-radius: 8rpx;
		padding: 26rpx 30rpx;
		display: flex;
		flex-direction: column;

		.form-row {
			height: 106rpx;
			width: 100%;
			@include bottomGreyBorder;
			display: flex;

			.row-name {
				@include center;
				width: 112rpx;
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0rpx;
				color: #3d444c;
				margin-right: 60rpx;
			}

			.uni-input-wrapper {
				width: 430rpx;
				display: flex;

				.uni-input {
					width: 430rpx;
					height: 48rpx;
					font-size: 28rpx;
					color: #969799;
				}
			}

			.customer-intention {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row;
				width: 450rpx;

				.arrow {
					width: 20rpx;
					height: 20rpx;
					@include contain-no-repeat-center;
					background-image: url('../../static/images/arrow.png');
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -10rpx;
				}

				.input-wrapper {
					position: relative;
					width: 450rpx;

					.uni-input {
						@include center;
						justify-content: flex-start;
						font-size: 28rpx;
						color: #969799;
					}
				}
			}
		}

		.customer-requirement {
			height: auto;
			min-height: 81px;
			justify-content: flex-start;
			align-items: flex-start;
			padding-top: 28rpx;

			.uni-textarea {
				width: 448rpx;
				min-height: 106rpx;
				overflow: scroll;
				max-height: 100vh;
				height: auto;
				padding-bottom: 15px;

				.textarea {
					width: 100%;
					height: 100%;
					color: #969799;
				}
			}
		}

		.blue-wide-button {
			width: 448rpx;
			height: 84rpx;
			background-image: linear-gradient(90deg, #2667b9 0%, #0b4daa 100%);
			box-shadow: 0rpx 8rpx 28rpx 6rpx rgba(16, 95, 196, 0.18);
			border-radius: 42rpx;
			font-size: 28rpx;
			line-height: 32rpx;
			letter-spacing: 0rpx;
			color: #ffffff;
		}
	}

	.pull-scroll {
		padding: 0 30rpx;
		background-color: #f7f8fa;
	}

	.operate-record {
		padding: 26rpx 30rpx;
		width: 100%;
		background-color: #ffffff;
		border-radius: 8rpx;
		flex-direction: column;
		display: flex;
		position: relative;

		.row-wrapper {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-part,
			.right-part {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 280rpx;
				height: 112rpx;
				padding-bottom: 14rpx;
				@include bottomGreyBorder;

				.row-name {
					max-width: 250rpx;
					@include ellipsis;
					height: 48rpx;
					font-size: 24rpx;
					line-height: 48rpx;
					color: #969799;
					/*margin-bottom: 8rpx;*/
				}

				.input-wrapper {
					position: relative;
					height: 48rpx;
					width: 100%;

					.uni-input {
						width: 100%;
						font-size: 28rpx;
						line-height: 48rpx;
						color: #3d444c;
						/*color: #969799;*/
						@include ellipsis;
					}

					.arrow {
						position: absolute;
						right: 0;
						top: 50%;
						margin-top: -6rpx;
						width: 12rpx;
						height: 12rpx;
						background-image: url('../../static/images/record/triangle-arrow@3x.png');
						@include contain-no-repeat-center;
					}
				}
			}
		}

		.btn-review {
			color: #ffffff;
			margin-top: 10px;
			background: #face91;
			width: 300px;
			height: 40px;
			line-height: 40px;
			border-radius: 30px;
			font-size: 28rpx;
		}

		.btn-wait {
			color: #d0808e;
			margin-top: 10px;
			background: #f2f2f2;
			width: 300px;
			height: 40px;
			line-height: 40px;
			border-radius: 7px;
			font-size: 28rpx;
		}

		.record-progress {
			width: 609rpx;
			height: 114rpx;
			border: solid 2rpx #ebedf0;
			@include center;

			.status-icon-text {
				width: 170rpx;
				display: flex;
				@include center;
				flex-direction: column;

				.icon {
					height: 38rpx;
					width: 38rpx;
					@include cover-no-repeat-center;
				}

				.text {
					width: 100%;
					@include ellipsis;
					height: 48rpx;
					font-size: 24rpx;
					line-height: 48rpx;
					letter-spacing: 0rpx;
					color: #ba9d61;
					text-align: center;
				}

				.inactive-text {
					color: #969799;
				}
			}

			.right-arrow {
				height: 30rpx;
				width: 30rpx;
				@include contain-no-repeat-center;
				/*background-color: #D8D8D8;*/
			}

			.active-right-arrow {
				background-image: url('../../static/images/record/right-arrow@3x.png');
			}

			.inactive-right-arrow {
				background-image: url('../../static/images/record/inactive-right-arrow@3x.png');
			}
		}
	}

	.loadEmpty {
		padding-top: calc(100vh/4);
		height: auto;
	}
</style>
